<template>
    <div>
        <h2>用户中心</h2>
        <button @click="xhs">点我跨年</button>
        <h3>{{ data }}</h3>
        <h1>{{ name}}</h1>
        <h1>{{ src }}</h1>
        <button @click="pwgn">修改跨年</button>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from 'vue'
export default defineComponent({
    name:'我是新来的vue3',
    setup(){
        // 函数/方法
        const xhs=()=>{
            console.log("你好：2023!");
        }
        const pwgn=()=>{
            qg.src="她陪我跨年";
            data.value="你是假的我才是真的"
        }
        // 记得从vue中解构，ref对象
        const data=ref('我才是新的定义')
        // 响应式对象
        const qg=reactive({
            name:'今年能加筷子吗',
            src:'谁陪你跨年'
        })
        return {
            xhs,
            data,
            pwgn,
            ...toRefs(qg)
        }
    }
})
</script>

<style lang="scss" scoped>

</style>